<template>
<!--  <div class="row justify-center container-row">-->
<!--    <div class="text-body2 row-padding">-->
  <div class="container">
    <div class="row-padding justify-center container-xxl container-row">
      <div class="footer-wrapper">
        <div class="footer-item">
          <h4>LOCAL</h4>
          <p class="text-h6">Fresh products from local producers, delivered directly to your front door,  daily.</p>
          <div class="logo">
            <q-icon :name="biEnvelopeOpenFill" left size="1.5rem"/>
            <q-icon :name="biTwitterX" left size="1.5rem"/>
            <q-icon :name="biFacebook" left size="1.5rem"/>
          </div>
        </div>

        <div class="footer-item" v-for="n in 2" :key="n">
            <h5>Popular categories</h5>
            <nav>
              <span class="link text-h6">
                <a href="javascript:;">Bread & Bakery</a>
              </span>
                  <span class="link text-h6">
                <a href="javascript:;">Dairy & Eggs</a>
              </span>
                  <span class="link text-h6">
                <a href="javascript:;">Fresh Meals & Pizzas</a>
              </span>
                  <span class="link text-h6">
                <a href="javascript:;">Kitchen Appliances</a>
              </span>
                  <span class="link text-h6">
                <a href="javascript:;">Fruits & Vegetables</a>
              </span>
            </nav>
        </div>

        <div class="footer-item">
          <h4>Quick links</h4>
          <p class="text-h6">
            13 Champs-Élysées
            <br>
            75008 Paris
            <br>
            France
          </p>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { biEnvelopeOpenFill, biTwitterX, biFacebook } from '@quasar/extras/bootstrap-icons'
</script>

<style lang="less" scoped>
.container{
  margin-top: 50px;
  border-bottom: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
}
.footer-wrapper{
  //padding: 80px 0px;
  //width: 100%;
  //display: flex;
  //flex-direction: row;
  //> div{
  //  flex: 1;
  //  padding-right: 140px;
  //  justify-content: center;
  //}
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 将容器分成四等分 */
  grid-gap: 8%; /* 定义间隙大小 */
  .flex-item {
    border: 1px solid #ccc; /* 为了更好地可视化，添加边框样式 */
    text-align: center;
    //padding: 10px;
  }
}

h4{
  font-family: 'YourCustomFontMedium', sans-serif;
  font-weight: 900;
  font-size: 28px;
  margin-bottom: 10px;
}

h5{
  font-family: 'YourCustomFontMedium', sans-serif;
  font-size: 25px;
  margin-bottom: 10px;
}
p{
  margin-bottom: 16px;
}
.link{
  margin-bottom: 10px;
  display: block;
  a{
    border-bottom: 2px solid #000; /* You can adjust the thickness and color of the underline */
    padding-bottom: 2px; /* Adjust the spacing between text and underline */
    font-size: small;
  }
}
.row-padding{
  padding: 92px 50px;
}
</style>